<template>
  <div class="container">
    <div class="app">
      {{ msg }}
    </div>
    <button @click="doubleCount" class="btn">
      点击按钮加一，当前数值：{{ count }}
    </button>
    <input v-model="val" placeholder="请输入内容" style="margin: 10px 0" />
    <button @click="divideByInput" class="btn">
      点击除以输入框数值按钮，结果：{{ result === null ? '' : result }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAppStore } from './store/index'

const val = ref(0)
const store = useAppStore()
const count = computed(() => store.count)
const msg =  ref('hello Vue3')
const result = ref(0)

function doubleCount() {
  store.increment()
}

function divideByInput() {
  if (val.value === 0) {
    alert("除数不能为0")
  } else {
    result.value = count.value / val.value
  }
}
</script>


<style scoped lang='less'>
.container{
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .app {
    width: 100px;
    height: 100px;
    transition: color 0.3s ease; /* 添加过渡效果 */
    &:hover {
      color: #e60000; /* 鼠标悬浮时改变颜色 */
    }
  }
  .btn {
    background-color: #9c34ba;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
  }
  .btn:hover {
    background-color: #be84ce;
    cursor: pointer;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
  }
}
</style>